<template>
  <div>
    <div id="city" @click="routers()">
      <span>成都<i class="iconfont icon-xia"></i></span>
    </div>
    <v-banner></v-banner>
    <div class="nav">
      <div @click="left()">
        <router-link to="/film/reying">正在热映</router-link>
      </div>
      <div @click="right()">
        <router-link to="/film/shangying">即将上映</router-link>
      </div>
      <div
        class="line"
        :style="{
          transition: '0.2s',
          transform: 'translate3d(' + num + '%,0,0)',
        }"
        ref="line"
      ></div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import VBanner from "@/components/banner.vue";
export default {
  components: {
    VBanner,
  },
  data() {
    return {
      num: null,
    };
  },
  methods: {
    left() {
      this.num = 0;
    },
    right() {
      this.num = 335;
    },
    routers(){
     this.$router.push('/city')
    }
  },
  watch: {
    $route: {
      handler(newName, oldName) {
        if (newName.path == "/film/reying") {
          this.num = 0;
        } else if (newName.path == "/film/shangying") {
          this.num = 335;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style scoped lang="less">
#city {
  position: absolute;
  width: 0.92rem;
  height: 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border-radius: 15px;
  z-index: 10;
  top: 0.39rem;
  left: 0.14rem;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    font-size: 0.26rem;
    i {
      font-size: 0.12rem;
      vertical-align: middle;
    }
  }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 1rem;
  background-color: #fff;
  position: relative;
  div {
    height: 100%;
  }
  .line {
    position: absolute;
    bottom: 0;
    width: 15%;
    height: 2px;
    left: 1.3rem;
    background-color: #ff5f16;
  }
  a {
    display: block;
    line-height: 1rem;
    color: #191a1b;
    font-size: 0.28rem;
  }
  .router-link-active {
    color: #ff5f16;
  }
}
</style>